import React from 'react';
import { Box } from "@chakra-ui/react";

interface KeyboardLayerProps {
  currentLayer: number;
  t: any;
  onLayerChange: (layer: number) => void;
}

const KeyboardLayer: React.FC<KeyboardLayerProps> = ({ currentLayer, onLayerChange, t }) => {
  return (
    <div className="flex flex-col gap-3">
      <button
        className={`w-[120px] h-12 rounded-lg transition-all duration-200 flex items-center justify-center text-sm font-medium
          ${currentLayer === 0 
            ? 'bg-orange-500/60 backdrop-blur-sm text-white shadow-lg scale-105 hover:bg-orange-500/70' 
            : 'bg-white/30 backdrop-blur-sm text-gray-700 hover:bg-orange-400/20 border border-orange-300/30'
          }`}
        onClick={() => onLayerChange(0)}
        style={{
          boxShadow: currentLayer === 0 ? '0 4px 12px rgba(255, 140, 0, 0.3)' : '0 2px 4px rgba(0, 0, 0, 0.1)'
        }}
      >
        {t("310")}
      </button>
      <button
        className={`w-[120px] h-12 rounded-lg transition-all duration-200 flex items-center justify-center text-sm font-medium
          ${currentLayer === 1 
            ? 'bg-orange-500/60 backdrop-blur-sm text-white shadow-lg scale-105 hover:bg-orange-500/70' 
            : 'bg-white/30 backdrop-blur-sm text-gray-700 hover:bg-orange-400/20 border border-orange-300/30'
          }`}
        onClick={() => onLayerChange(1)}
        style={{
          boxShadow: currentLayer === 1 ? '0 4px 12px rgba(255, 140, 0, 0.3)' : '0 2px 4px rgba(0, 0, 0, 0.1)'
        }}
      >
        {t("311")}
      </button>
    </div>
  );
};

export default KeyboardLayer;

export function KeyboardLayerButton({ children, isActive, onClick, id }: { children: React.ReactNode, isActive: boolean, onClick: () => void, id: string }) {
  return (
    <Box
      id={id}
      onClick={onClick}
      className={`
        px-4 py-2 rounded-lg cursor-pointer transition-all duration-200 
        ${isActive 
          ? 'bg-orange-500/60 backdrop-blur-sm text-white shadow-lg scale-105 hover:bg-orange-500/70'
          : 'bg-white/30 backdrop-blur-sm text-gray-700 hover:bg-orange-400/20 border border-orange-300/30'
        }
      `}
      style={{
        boxShadow: isActive ? '0 4px 12px rgba(255, 140, 0, 0.3)' : '0 2px 4px rgba(0, 0, 0, 0.1)'
      }}
    >
      {children}
    </Box>
  );
} 